<template>
<div class="boxf">
	<!--头部-->
	<div class="xiang-top">
		<a href="#/"><img class="xiang-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<p class="xiangpin">打造玫瑰般娇嫩肌肤</p>
		<a><img class="xiang-fan" src="../assets/img/duanhuowang/fan.png" alt=""/></a>
	</div>
	<!--大图-->
	<img id="top" class="yangp" src="../assets/img/shouye/tuijian/t.png" alt=""/>
	<!--介绍-->
	<div class="lunjie">
		<p class="duoj">Rose Hydrosed是一款来自澳大利亚的护肤产品，主要功能为深层滋润肌肤，锁住水分，打造玫瑰般娇嫩肌肤...</p>
		<p>下面为您推荐一些产品</p>
	</div>
	<!--防晒类-->
	<div class="fangshai">
	<div class="fshai">
		<!--头部奖牌-->
			<div class="jone"><img src="../assets/img/shouye/lunbo/jin1.png" alt=""/></div>
			<div class="rjiang">
				<p class="fsl">防晒类&nbsp;&nbsp;第<span>1</span>位</p>
				<img class="sang" src="../assets/img/shouye/lunbo/sangang.png" alt=""/>
			</div>
		<!--产品介绍-->
		<div class="mfb"><img class="mfbt" src="../assets/img/fenlei/jiemian.png" alt=""/></div>
		<div class="mfbright">
			<h1 class="mfbb">美肤宝</h1>
			<p class="mfbj">守护肌肤预防紫外线所引发的斑点以及胶原蛋白变形等，是具有抗老保养效果的全效防晒霜</p>
			<p class="mfbli">立即购买
				<img class="lit" src="../assets/img/shouye/lunbo/sanjy.png" alt=""/>
			</p>
		</div>
	</div>
	<!--防晒，爽肤水，精华，乳液，面霜等-->
	<div class="hufu">
		<div class="liebiao">
		<nav class="sactive dao">防晒</nav>
		<nav class="dao shui">爽肤水x精华</nav>
		<nav class="dao">乳液x面霜<img class="xia" src="../assets/img/shouye/lunbo/xiajiantou.png" alt=""/></nav>
		</div>
		<!--点击防晒出现所有分类-->
	<div class="fenlei">
		<p class="suoyou">所有分类</p>
		<p class="xiaolei">
		<a class="fenhong">防晒</a><a>爽肤水x精华</a><a>乳液x面霜</a><a>卸妆水</a><a>散粉蜜粉</a><a>眼妆</a><a>面膜</a><a>粉饼x粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击精华出现所有分类-->
	<div class="fenlei">
		<p class="suoyou">所有分类</p>
		<p class="xiaolei">
		<a class="fenhong">精华</a><a>爽肤水</a><a>精华</a><a>爽肤水</a><a>散粉蜜粉</a><a>眼妆</a><a>面膜</a><a>粉饼x粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!--点击乳液出现所有分类-->
	<div class="fenlei">
		<p class="suoyou">所有分类</p>
		<p class="xiaolei">
		<a class="fenhong">乳液</a><a>面霜</a><a></a><a>面霜</a><a>乳液</a><a>眼妆</a><a>面膜</a><a>粉霜</a><a>榜上有名</a>
		</p>
	</div>
	<!---->
	</div>
	<!--标题-->
		<div class="lun-renbiao">
			<span class="lun-left"></span> 往期上榜
			<span class="lun-right"></span>
		</div>
		<!--曲奇礼盒单品介绍-->
	<div class="danf" v-for="bb in 2">
	<div class="lun-danqu">
		<div class="lun-ktimg">
		<img class="lun-kitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="lun-ktwen">
		<p class="lun-kzi">蜗牛饰容BB霜50g</p>
		<p class="lun-bmongy">￥12.90</p>
		<p class="lun-qiang">立即购买</p>
		</div>
	</div>
	<!--右边-->
	<div class="lun-rdanqu">
		<div class="lun-rktimg">
		<img class="lun-rkitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="lun-rktwen">
		<p class="lun-rkzi">蜗牛饰容BB霜50g</p>
		<p class="lun-rbmongy">￥12.90</p>
		<p class="lun-rqiang">立即购买</p>
		</div>
	</div>
 </div>
 </div>
 <!--精华类-->
	<div class="fshai">
		<!--头部奖牌-->
			<div class="jone"><img src="../assets/img/shouye/lunbo/jiang2.png" alt=""/></div>
			<div class="rjiang">
				<p class="fsl">精华类&nbsp;&nbsp;第<span>2</span>位</p>
				<img class="sang" src="../assets/img/shouye/lunbo/sangang.png" alt=""/>
			</div>
		<!--产品介绍-->
		<div class="mfb"><img class="mfbt" src="../assets/img/fenlei/jiemian.png" alt=""/></div>
		<div class="mfbright">
			<h1 class="mfbb">美肤宝</h1>
			<p class="mfbj">守护肌肤预防紫外线所引发的斑点以及胶原蛋白变形等，是具有抗老保养效果的全效防晒霜</p>
			<p class="mfbli">立即购买
				<img class="lit" src="../assets/img/shouye/lunbo/sanjy.png" alt=""/>
			</p>
		</div>
	</div>
	<!--标题-->
		<div class="lun-renbiao">
			<span class="lun-left"></span> 往期上榜
			<span class="lun-right"></span>
		</div>
	<!--曲奇礼盒单品介绍-->
	<div class="danf" v-for="bb in 2">
	<div class="lun-danqu">
		<div class="lun-ktimg">
		<img class="lun-kitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="lun-ktwen">
		<p class="lun-kzi">蜗牛饰容BB霜50g</p>
		<p class="lun-bmongy">￥12.90</p>
		<p class="lun-qiang">立即购买</p>
		</div>
	</div>
	<!--右边-->
	<div class="lun-rdanqu">
		<div class="lun-rktimg">
		<img class="lun-rkitty" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		</div>
		<div class="lun-rktwen">
		<p class="lun-rkzi">蜗牛饰容BB霜50g</p>
		<p class="lun-rbmongy">￥12.90</p>
		<p class="lun-rqiang">立即购买</p>
		</div>
	</div>
 </div>
 <!--点击回到顶部-->
		<a href="#top">
			<div class="lun-ding">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			<p class="lun-fanding">返回顶部</p>
			</div>
		</a>
 <!---->
</div>
</template>

<script>
	export default {
		methods:{
			fenlei:function(){
				$(".xiaolei>a").click(function(){
					$(this).addClass("fenhong").siblings("a").removeClass("fenhong");
				})
			},
		daohang:function(){
			$(".dao").attr("hang",false);
			var index = 0;
			$(".dao").click(function(){
				$(this).addClass("sactive").siblings("nav").removeClass("sactive");
				$(".fenlei").eq($(this).index()).addClass("fenshow").siblings(".fenlei").removeClass("fenshow");
			
				if ($(this).attr("hang") == "false") {
					$(".fenlei").eq($(this).index()).slideDown(500).siblings(".fenlei").hide();
					$(this).attr("hang",true);
				}else if ($(this).attr("hang") == "true") {
					$(".fenlei").eq($(this).index()).slideUp(500);
					$(this).attr("hang",false);
				}
			})
		},
		},
		mounted:function(){
			this.fenlei();
			this.daohang();
		}
	}
</script>

<style>
	.boxf{
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #feeaf5;
	}
	/*头部*/
		.xiang-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}
	
	.xiangpin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 11rem;
		font-weight: 200;
	}
	
	.xiang-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.xiang-fan {
		width: 3.6rem;
		height: 3.4rem;
	}
	/*样品*/
	.yangp{
		width: 100%;
		height: 30.1rem;
		margin-top: 9.6rem;
	}
	/*样品介绍*/
	.lunjie{
		width: 100%;
		height: 17rem;
		background: #FFFFFF;
		margin:1rem 0;
		padding:1rem 2rem 0 2rem;
		font-size: 2.8rem;
		color:#4D4D4D;
	}
	.duoj{
		width: 68.8rem;
		text-align: left;
		padding-bottom: 1rem;
	}
	/*防晒类*/
	.fshai{
		width: 100%;
		height: 31rem;
		background: #FFFFFF;
	}
	.jone{
		width:8rem;
		height: 9rem;
		float: left;
		padding:1rem 3rem;
	}
	.jone>img{
		width: 100%;
		height: 100%;
	}
	.rjiang{
		width: 50rem;
		height: 9rem;
		padding-top:2rem;
		float: left;
	}
	.fsl>span{
		font-size: 3.6rem;
	}
	.fsl{
		font-size: 2.8rem;
		color:#c46c25;
		padding-bottom: 1rem;
	}
	.sang{
		width: 50rem;
	}
	/*美肤宝*/
	.mfb{
		width: 16rem;
		height: 18rem;
		border:0.1rem solid #CCCCCC;
		margin-left: 2rem;
		text-align: center;
		float: left;
	}
	.mfbt{
		width: 13.4rem;
		height: 10.8rem;
		padding-top:4.5rem;
	}
	.mfbright{
		float: left;
		width: 49rem;
		height: 18rem;
		padding-left: 2rem;
	}
	.mfbb{
		color:#4D4D4D;
		font-size: 3rem;
	}
	.mfbj{
		font-size: 2.4rem;
		color:#808080;
		margin:2rem 0;
	}
	.mfbli{
		width: 12rem;
		height: 3rem;
		background: #E53E42;
		text-align: center;
		/*line-height: 3rem;*/
		font-size: 1.8rem;
		color:#FFFFFF;
	}
	.lit{
		width: 0.9rem;
		height: 1.2rem;
	}
	/*护肤品*/
	.liebiao{
		width: 100%;
		height: 6rem;
		background: #FFFFFF;
		margin-top:1rem;
		font-size:3rem;
		box-sizing: border-box;
		line-height: 6rem;
		color:#4D4D4D;
		display: flex;
		justify-content: space-around;
	}
	.xia{
		width: 2.4rem;
		height: 1.4rem;
	}
	.kong{
		width: 0.1rem;
		height: 2.9rem;
		background: #4D4D4D;
	}
	.sactive{
		color:red;
		border-bottom: 0.3rem solid red;
	}
	/*往期上榜*/
	.lun-renbiao {
		width: 100%;
		font-size: 3rem;
		height: 6rem;
		line-height: 6rem;
		margin-top:1rem ;
		background: #e8b2d0;
		text-align: center;
		color:#4D4D4D;
	}
	.lun-left,
	.lun-right {
		display: inline-block;
		width: 6rem;
		height: 0.2rem;
		background: #808080;
		margin-bottom: 0.9rem;
	}
	/*单个曲奇🍪*/
	.danf{
		overflow: hidden;
		width: 100%;
	}
	.lun-danqu{
		width: 33rem;
		margin:1rem 1rem 1rem 2rem;
		background: #FFFFFF;
		text-align: center;
		float:left;
	}
	.lun-ktimg,.lun-rktimg{
		width: 100%;
		height: 22rem;
		border-bottom: 0.1rem solid #A9A9A9;
	}
	.lun-kitty,.lun-rkitty{
		width: 6.4rem;
		height: 14.2rem;
		margin:4.6rem 0;
	}
	.lun-kzi,.lun-rkzi{
		width: 30rem;
		font-size: 2.4rem;
		padding: 1rem 0 0rem 1rem;
		text-align:center;
		color:#4d4d4d;
	}
	.lun-bmongy,.lun-rbmongy{
		font-size: 2.4rem;
		color:red;
	}
	.lun-qiang,.lun-rqiang{
		font-size: 1.8rem;
		width: 21.8rem;
		height: 3rem;
		background: red;
		border-radius: 1.5rem;
		color:white;
		margin:auto;
		margin-bottom: 1rem;
		font-weight: 200;
	}
	/*右*/
	.lun-rdanqu{
		width: 33rem;
		background: #FFFFFF;
		text-align: center;
		margin:1rem 1rem 1rem 0.7rem;
		float:left;
	}
		/*返回顶部*/
	.lun-ding{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.lun-ding>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
	.lun-fanding{
		font-size: 2.4rem;
		color:red;
		text-align: right;
		font-weight: 150;
		padding-top: 1rem;
	}
	/*点击出现所有分类*/
	.hufu{
		position: relative;
	}
	.fenlei{
		width: 100%;
		background:#FFFFFF;
		position: absolute;
		top:6rem;
		display: none;
	}
	.suoyou{
		width: 100%;
		height: 5rem;
		font-size: 2.8rem;
		color:#808080;
		padding:1rem 0 0 2rem;
		border-top: 0.01rem solid #808080;
		border-bottom: 0.01rem solid #808080;
	}
	.xiaolei{
		width: 100%;
	}
	.xiaolei>a{
		display: inline-block;
		font-size: 2.8rem;
		padding:1rem;
		color:#4D4D4D;
	}
	.xiaolei .fenhong{
		color:red;
	}
	.shui{
		height: 3rem;
		line-height: 3rem;
		border-left: 0.1rem solid #808080;
		border-right: 0.1rem solid #808080;
		padding:0 4rem;
		margin-top: 2rem;
	}
</style>